function load() {
    innitialFrame();
    init();
}
var num=0;
var data=[];
function innitialFrame() {
    var btn = document.getElementById("selectNum");
    btn.style.display="flex";
    btn.style.justifyContent="flex-start";
    btn.style.alignItems="flex-end";
}
function init() {
  
    var addNum = document.getElementById("add");
    addNum.onclick = function () {
        add();
    }
    var sortNum=document.getElementById("sort");
    sortNum.onclick=function () {
        sort();
    }
}
function add() {
   var input = document.getElementById("input").value;
   if(!(input>10&&input<100)){
       return;
   }
   if(num>=60){
       return;
   }
    var btn = document.getElementById("selectNum");
    var button = buttonCreate(input);
    btn.appendChild(button);
    data[num]=input;
    num++;
}
function sort(){
    var buttonChild=document.getElementById("selectNum").children;
    for(var i=0;i<num;i++){
        for(var j=i+1;j<num;j++){
            if(data[i]>data[j]){
                var exchange=data[i];
                data[i]=data[j];
                data[j]=exchange;
                buttonChild[i].style.height=data[i];
                buttonChild[j].style.height=data[j];
            }
        }
    }
}

function buttonCreate(data) {
    var button = document.createElement("button");
    button.style.borderStyle = "none";
    button.style.backgroundColor = "red";
    button.style.width = 1 + "%";
    button.style.height = data+"px";
    button.style.marginRight=0.2+"%";
    button.style.marginTop=1+"%";
    return button;
}


